<template>
  <div class="container enroll">
    <scroll-view
      class="demand-body"
      :scroll-y="true"
    >
      <van-cell-group
        custom-class="demand-header van-cell-group-radius"
        :border="false"
      >
        <van-cell
          :title="demand.title"
          custom-class="autofit-cell demand-header-info"
          use-label-slot
        >
          <view slot="label">
            <view
              class="match-board"
              v-if="demand.category"
            >
              <view class="match-board-text">{{demand.category.name}}</view>
            </view>
          </view>
        </van-cell>
        <user-cell
          :border="false"
          :icon="demand.user.avatar"
          :title="demand.user.companyName"
          :label="demand.user.username"
        />
      </van-cell-group>
      <van-cell-group
        v-if="demand.body.length>0"
        custom-class="content-body"
        :border="false"
      >
        <p
          v-for="(text,index) in demand.body"
          :key="index"
          class="content-body__paragraph"
        >
          {{ text }}
        </p>
        <p
          class="content-body__image"
          v-for="(image,index) in demand.images"
          :key="index"
        >
          <image
            :src="image.path"
            mode="widthFix"
          />
        </p>
      </van-cell-group>
      <!-- <van-cell-group
        v-if="demand.attach"
        custom-class="content-attach"
      >
        <download-cell
          icon="/static/icons/attach.png"
          title="附件:"
          :file-name="demand.attach.filename"
          :file-path="demand.attach.path"
          :user="user"
        />
      </van-cell-group> -->
      <van-cell-group
        v-if="demand.solutions.length>0"
        title="解决方案"
        custom-class="content-solutions"
      >
        <van-cell
          v-for="(solution,index) in demand.solutions"
          :key="index"
          use-label-slot
          custom-class="solution-cell"
        >
          <view slot="title">
            <view class="van-multi-ellipsis--l2">
              {{solution.title}}
            </view>
          </view>
          <view
            slot="label"
            class="solution-extend"
          >
            <view
              v-if="solution.user"
              class="solution-extend__company"
            >{{solution.user.companyName}}</view>
            <view class="solution-extend__owner">
              <view v-if="solution.user">{{solution.user.username}}</view>
              <view>{{solution.publish_time}}</view>
            </view>
          </view>
        </van-cell>
      </van-cell-group>
    </scroll-view>
    <page-action>
      <van-button
        plain
        icon="friends-o"
        type="info"
        @click="onClickSignup"
      >
        立即报名
      </van-button>
      <!-- <van-button
        plain
        icon="share"
        color="#666"
        open-type="share"
      >
        我要分享
      </van-button> -->
    </page-action>
  </div>
</template>

<script>
import UserCell from '@/components/cell/user'
import DownloadCell from '@/components/cell/download'
import Scalebox from '@/components/scalebox'
import PageAction from '@/components/action'
import toppanel from '@/components/toppanel'
// import { needViewApi } from '@/api'

export default {
  components: {
    UserCell,
    PageAction,
    toppanel,
    Scalebox,
    DownloadCell
  },

  data () {
    return {
      id: 0,
      scroll: {
        x: false,
        y: true
      },
      demand: {
        'id': 45,
        'title': '科技信息(学术研究)',
        'thumb': 'https://oss.youmbe.com/attachments/default/202105/27/e96R4277096e0d4decb5aa7ed957e554ed2b03.jpeg',
        'category': {
          'id': 1,
          'parent_id': 0,
          'name': '能源',
          'abbr': null,
          'thumb': '/stcor/assets/category/01.png',
          'description': null,
          'template': '',
          'link': '',
          'listorder': 0,
          'recommend_at': 0,
          'reserved': 0,
          'navbar': 0,
          'status': 10,
          'created_at': 0,
          'updated_at': 0,
          'deleted_at': 0
        },
        'user': {
          'id': 1,
          'username': '科技特派员',
          'email': '',
          'avatar': 'https://oss.youmbe.com/assets/default/images/avatar.png',
          'companyName': '济南云贝网络科技有限公司'
        },
        'body': [
          '《科技信息(学术研究)》杂志是由中华人民共和国新闻出版总署、正式批准公开发行的优秀学术期刊，科技信息(学术研究)杂志具有正规的双刊号，其中国内统一刊号：CN37-1021/N，国际刊号：ISSN1001-9960，邮发代号：无，属于正规学术期刊。\r',
          '\r',
          '科技信息(学术研究)杂志社由正规单位主管主办，本刊为月底出刊。\r',
          '\r',
          '自创刊以来，《科技信息(学术研究)》严格遵守学术出版管理条例，努力办好刊物。《科技信息(学术研究)》可以用于正常评审职称、自主招生、考研保研、加分晋升，均有效！\r',
          '\r',
          '本站不是《科技信息(学术研究)》杂志社官方网站。侵权删除\r',
          '\r',
          '本站为《科技信息(学术研究)》杂志编辑部合作授权组稿中心，具有绿色通道投稿，可优先加急录用！'
        ],
        'images': [
          {
            'path': 'https://oss.youmbe.com/attachments/default/202105/27/e96R4277096e0d4decb5aa7ed957e554ed2b03.jpeg',
            'format': 'image',
            'filename': '.'
          },
          {
            'path': 'https://oss.youmbe.com/attachments/default/202105/27/F3BTHn840aff16003dc81eb3727fe6196c1f2b.jpeg',
            'format': 'image',
            'filename': '.'
          },
          {
            'path': 'https://oss.youmbe.com/attachments/default/202105/27/H8T7ff7118c2b101a370869c89e96af37ae68c.jpeg',
            'format': 'image',
            'filename': '.'
          }
        ],
        'attach': {
          'path': 'https://oss.youmbe.com/attachments/default/202105/27/msTtuaf71346c729859f7e3659b8a13c12cb74.docx',
          'format': 'file',
          'filename': '附件1：河东区区级科技特派员注册备案表.docx.docx'
        },
        'recommend_at': 0,
        'publish_time': '2021-05-27',
        'solutions': []
      },
      titleColor: '#000000',
      show: false,
      downloading: false,
      downloadProgress: 0,
      tempFile: '',
      user: null
    }
  },
  onLoad (option) {
    this.id = option.id
  },
  methods: {
    // 获取数据方法
    getDemand () {
      // needViewApi(this.id)
      //   .then((res) => {
      //     console.log(res)
      //     this.demand = res
      //   })
      //   .catch((e) => {
      //     console.log(e)
      //   })
    },
    onClickSignup () {
      let url = '/pages/activity/signup/main?id=' + this.demand.id
      console.log(url)
      this.pushNativelink({
        id: '1',
        type: 'push',
        route: url
      })
      console.log('onClickSignup')
    }
  },
  onShow () {
    console.log('onShow')
    this.user = mpvue.getStorageSync('mine')
    this.getDemand()
  },
  onShareAppMessage (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: this.title,
      path: '/pages/demand/main?id=' + this.id + '&from=share'
    }
  }
}
</script>

<style lang="less">
page {
  height: 100%;
}
.demand {
  &-container {
    height: 100%;
    background: #f1f2f4;
  }
  &-needlogin {
    margin: 15px;
    border-radius: 5px;
    padding: 20px 25px;
    background: #fff;
    &__logintips {
      width: 100%;
      height: 100%;
    }
  }
}
.content {
  &-body {
    padding: 10px 15px;
    background: #fff;
    p {
      margin-bottom: 10px;
      &:last-child {
        margin: 0;
      }
    }
    &__paragraph {
      text-indent: 1em;
    }
    &__image {
      image {
        width: 100%;
      }
    }
  }
  &-attach {
    margin: 10px 0;
    &__download {
      .van-cell__value {
        flex: none;
      }
    }
    &__file {
      position: relative;
      .van-progress {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
      }
    }
    &__btn {
      margin-left: 10px;
    }
  }

  &-solutions {
    .solution-cell {
      padding: 15px;
    }
    .solution-extend {
      margin-top: 10px;
      &__owner {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}

.demand-body {
  margin-top: -10px;
}
.demand-header {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  &-info {
    .van-cell__title {
      font-size: 18px;
      font-weight: bold;
    }
    .van-cell__label {
      margin-top: 10px;
    }
    .van-cell__value {
      flex: none;
    }
    .match-rate {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      padding-left: 15px;
      position: relative;
      margin-left: 15px;
      &::before {
        content: "";
        width: 1px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: #f2f3f4;
        transform: scale(0.5, 1);
      }
      &-point {
        font-size: 18px;
        color: coral;
        font-weight: bold;
      }
    }
  }
}
.match-board {
  display: inline-flex;
  align-items: center;
  &-icon {
    background: #1f2322;
    color: #fff;
    border-radius: 3px 0 0 3px;
    padding: 2px 5px;
  }
  &-text {
    color: #333;
    background: #fedab7;
    border-radius: 3px;
    font-size: 12px;
    padding: 2px 5px;
  }
  &-icon + &-text {
    border-radius: 0 3px 3px 0;
  }
}

.van-cell-group__title {
  font-size: 14px !important;
  font-weight: bold !important;
  color: #000 !important;
  padding: 10px 15px !important;
}
</style>
